<template>
  <Layout>
    <Header style="width: 100%; margin-top: -2%">
      <MyHeader />
    </Header>
    <Content class="content">
      <el-card class="tableCard">
        <div class="options">
          <el-form :inline="true" class="options" v-model="formInline">
            <el-form-item label="测试厂商:">
              <el-select
                v-model="formInline.company"
                placeholder="请选择测试厂商"
                @change="companySelected"
              >
                <el-option
                  v-for="(item, index) in deviceUsersList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务列表:">
              <el-select
                v-model="formInline.task_id"
                placeholder="请选择任务列表"
                @change="taskSelected"
              >
                <el-option
                  v-for="(item, index) in taskInfo"
                  :key="index"
                  :label="item.task_id"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="测试时间:">
              <el-date-picker
                style="width: 600px"
                v-model="formInline.date"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">确认</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-card>
          <div slot="header">
            <div style="font-size: 20px; font-weight: bold">结果分析</div>
          </div>
          <el-table :data="resultInfo.summary" border v-loading="loading">
            <el-table-column
              prop="管辖公司"
              label="管辖公司"
              width="150"
            ></el-table-column>
            <el-table-column prop="测试时长" label="测试时长"></el-table-column>
            <el-table-column
              prop="平均掉线次数"
              label="平均掉线次数"
            ></el-table-column>
            <el-table-column
              prop="平均掉线时长"
              label="平均掉线时长"
            ></el-table-column>
            <el-table-column
              prop="平均在线率"
              label="平均在线率"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="实推路数"
              label="实推路数"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="优质路数"
              label="优质路数(在线率>=95%)"
            ></el-table-column>
            <el-table-column
              prop="开始测试时间"
              label="开始测试时间"
            ></el-table-column>
            <el-table-column
              prop="结束测试时间"
              label="结束测试时间"
            ></el-table-column>
          </el-table>
        </el-card>
        <el-card style="margin-top: 4vh">
          <div slot="header">
            <div style="font-size: 20px; font-weight: bold">测试结果</div>
          </div>
          <el-table
            :data="resultInfo.details"
            max-height="600"
            v-loading="loading"
            @expand-change="rowExpand"
            :row-key="getRowKeys"
            :expand-row-keys="expands"
            border
          >
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table :data="rowData" border>
                  <el-table-column
                    prop="StreamName"
                    label="StreamName"
                  ></el-table-column>
                  <el-table-column
                    prop="GroupId"
                    label="GroupId"
                  ></el-table-column>
                  <el-table-column
                    prop="StreamId"
                    label="StreamId"
                  ></el-table-column>
                  <el-table-column
                    prop="Online"
                    label="Online"
                  ></el-table-column>
                  <el-table-column
                    prop="Duration"
                    label="Duration"
                  ></el-table-column>
                  <el-table-column
                    prop="RecordCreatedTime"
                    label="RecordCreatedTime"
                  ></el-table-column>
                  <el-table-column
                    prop="RecordUpdatedTime"
                    label="RecordUpdatedTime"
                  ></el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              prop="管辖公司"
              label="管辖公司"
              width="120"
            ></el-table-column>
            <el-table-column prop="推流ID" label="推流ID"></el-table-column>
            <el-table-column
              prop="总测试时长"
              label="总测试时长"
            ></el-table-column>
            <el-table-column
              prop="累计断线时长"
              label="累计断线时长"
            ></el-table-column>
            <el-table-column
              prop="累计在线时长"
              label="累计在线时长"
            ></el-table-column>
            <el-table-column
              prop="累计断线次数"
              label="累计断线次数"
            ></el-table-column>
            <el-table-column prop="在线率" label="在线率"></el-table-column>
          </el-table>
        </el-card>
      </el-card>
    </Content>
  </Layout>
</template>

<script>
import MyHeader from "./Header.vue";
import { mapActions, mapState } from "vuex";
import constData from "../util/constData";
import { reqMonitorRecordInfo } from "../api";
import dayjs from "dayjs";

export default {
  data() {
    return {
      loading: false,
      formInline: {
        company: "",
        task_id: "",
        date: [],
        streamNames: "",
      },
      rowData: [],
      showRow: false,
      expands: [],
      getRowKeys(row) {
        return row.id;
      },
    };
  },
  methods: {
    ...mapActions([
      "getDeviceUsers",
      "queryTaskInfo",
      "queryMonitorResultInfo",
    ]),
    companySelected(data) {
      const params = {
        username: data,
      };
      let reqObj = {
        params: params,
        filterStartDateFlag: true, //表示过滤掉start_date为-1的
      };
      // this.queryTaskInfo(reqObj);
      let promise = this.queryTaskInfo(reqObj);
      //解决切换选中的厂商提交时，选中的任务列表仍然没变的问题
      promise.then(() => {
        if (this.taskInfo.length > 0) {
          this.formInline.task_id = 1; //默认选中任务列表中的第一条任务
          this.taskSelected(1);
        } else {
          this.formInline.task_id = "无数据"; //解决任务列表无任务时，提示无数据，不向用户提供选择服务
        }
      });
    },
    taskSelected(data) {
      const { start_date, stop_date, cameraNums } = this.taskInfo[data - 1];
      this.formInline.date = [start_date, stop_date];
      this.formInline.streamNames = cameraNums;
    },

    submitForm() {
      if (this.formInline.task_id != "无数据") {
        this.expands = [];
        const { company, streamNames, date } = this.formInline;
        let params = new FormData();
        params.append("company", company);
        params.append("streamNames", streamNames);
        params.append(
          "startTime",
          dayjs(date[0]).format("YYYY/MM/DD HH:mm:ss")
        );
        params.append("endTime", dayjs(date[1]).format("YYYY/MM/DD HH:mm:ss"));
        this.loading = true;
        let promise = this.queryMonitorResultInfo(params);
        promise
          .then(() => {
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        //任务列表无任务时，提示无数据，且无法提交
        this.$message({
          message: "任务列表暂无数据，提交失败！",
          type: "warning",
        });
      }
    },

    async rowExpand(data, expandedRows) {
      this.rowData = [];
      if (this.expands.length && data.id === this.expands[0]) {
        this.expands = [];
      } else if (this.expands.length && data.id !== this.expands[0]) {
        this.expands = [];
        this.expands.push(data.id);
      } else {
        this.expands.push(data.id);
      }
      let params = new FormData();
      params.append("streamName", data["推流ID"]);
      params.append(
        "startTime",
        dayjs(this.formInline.date[0]).format("YYYY/MM/DD HH:mm:ss")
      );
      params.append(
        "endTime",
        dayjs(this.formInline.date[1]).format("YYYY/MM/DD HH:mm:ss")
      );
      let resData = await reqMonitorRecordInfo(params);
      this.rowData = resData.records;
    },
  },
  components: {
    MyHeader,
  },
  computed: {
    ...mapState(["deviceUsersList", "taskInfo", "resultInfo"]),
  },
  watch: {},
  mounted() {
    this.getDeviceUsers();
  },
};
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tableCard {
  margin-top: 2vh;
  width: 95vw;
  height: 950px;
}
.options {
  display: flex;
  align-items: center;
  width: 95%;
  justify-content: space-between;
}
.el-form-item .el-form-item__label {
  font-weight: bold;
  font-size: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  /* width: 90px; */
  color: #99a9bf;
}
/* .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
} */
</style>